@extends('layouts.template')

@section('title', '管理后台')

@section('content')

    <script>
        $(function(){

            var form = new Vue({
                el:'#contentpanel',
                data:{
                },
                computed:{
                },
                mounted:function(){
                },
                watch: {
                },
                methods:{
                },
                components:{
                }
            });

            $('#edit').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var modal = $(this);
                modal.find('[name=area_id]').val(button.data('id'));
                modal.find('[name=parentid]').val(button.data('parentid'));
                modal.find('[name=name]').val(button.data('name'));
            });

            var validator = $("#add-form").validate({
                rules: {
                    parentid:{
                        required:true,
                    },
                    name:{
                        required:true,
                        chineseName:true,
                    },
                },
                messages: {
                    parentid:{
                        required:'上级区域ID',
                    },
                    name:{
                        required:'请输入区域名称',
                    },
                },
                submitHandler: function(form) {
                    form.submit();
                },
            });

            var validator = $("#edit-form").validate({
                rules: {
                    area_id:{
                        required:true,
                    },
                    parentid:{
                        required:true,
                    },
                    name:{
                        required:true,
                        chineseName:true,
                    },
                },
                messages: {
                    area_id:{
                        required:'缺少地区id',
                    },
                    parentid:{
                        required:'上级区域ID',
                    },
                    name:{
                        required:'请输入区域名称',
                    },
                },
                submitHandler: function(form) {
                    form.submit();
                },
            });
        });

    </script>

    <div class="panel-body">
        <div class="panel panel-default">
            <div class="panel-body">
                <form action="" method="GET" class="form-inline">
                    <div>
                        {!! $filter !!}
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="contentpanel" id="contentpanel">

        <div class="form-group">
            <label>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add">+ 新建区域</button>
            </label>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table class="table mb30">
                        <thead>
                        <tr style="white-space:nowrap">
                            <th>ID</th>
                            <th>名称</th>
                            <th>上级区域</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <?php foreach ($list as $row):?>
                            <tr data-id="{{$row->id}}">
                                <td>{{$row->id}}</td>
                                <td>{{$row->name}}</td>
                                <td>{{$row->parent ? $row->parent->name : '/'}}</td>
                                <td>
                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#edit" data-id="{{$row->id}}" data-name="{{$row->name}}" data-parentid="{{$row->parentid}}">修改</button>
                                    <a onclick="return confirm('确定')" href="{{url("admin/areadel/{$row->id}")}}" class="btn btn-danger">删除</a>
                                </td>
                            </tr>
                        <?php endforeach;?>
                        </tbody>
                    </table>
                </div>
                <!-- table-responsive -->
                {{ @!$list->isEmpty() ? $list->appends(request()->all())->links() : '' }}
            </div>
            <!-- col-md-12 -->
        </div>
    </div><!-- contentpanel -->

    <div class="modal fade" id="add" tabindex="-1" role="dialog" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">新建区域</h4>
                </div>
                <form id="add-form" method="post" action="{{url("admin/areaadd")}}">
                    {{csrf_field()}}
                    <div class="modal-body">
                        <div class="form-group">
                            <input type="text" class="form-control" name="parentid" placeholder="上级区域ID">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" name="name" placeholder="区域名称">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">新建</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="edit" tabindex="-1" role="dialog" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">编辑</h4>
                </div>
                <form id="edit-form" method="post" action="{{url("admin/areaedit")}}">
                    {{csrf_field()}}
                    <input type="hidden" name="area_id">
                    <div class="modal-body">
                        <div class="form-group">
                            <input type="text" class="form-control" name="parentid" placeholder="上级区域ID">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" name="name" placeholder="区域名称">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

